
<template>
  <div>
    <div class="outer_label">
      <img
        class="inner_label login_logo"
        src="../../assets/logo.png"
      >
    </div>
    <div class="login_form">
      <input
        type="text"
        class="qxs-ic_user qxs-icon"
        placeholder="用户名"
        v-model="userName"
      >
      <input
        type="text"
        class="qxs-ic_password qxs-icon"
        placeholder="密码"
        v-model="password"
      >
      <el-button
        class="login_btn"
        @click.native="login"
        type="primary"
        round
        :loading="isBtnLoading"
      >登录</el-button>
    </div>
  </div>
</template>
 
 
 
<script>
import CryptoJS from "crypto-js";
import crypto from "crypto";

export default {
  data() {
    return {
      userName: "",
      password: "",
      isBtnLoading: false
    };
  },
  created() {
    if (
      JSON.parse(localStorage.getItem("user")) &&
      JSON.parse(localStorage.getItem("user")).userName
    ) {
      this.userName = JSON.parse(localStorage.getItem("user")).userName;
      this.password = JSON.parse(localStorage.getItem("user")).password;
    }
  },
  computed: {
    btnText() {
      if (this.isBtnLoading) return "登录中...";
      return "登录";
    }
  },
  methods: {
    //返回拼接上sign的请求对象
    getSortObjByAsciiWithObj(obj, secret) {
      var arr = [];
      for (var key in obj) {
        arr.push(key);
      }
      var sPara = [];
      //除去数组中的空值和签名参数
      for (var i1 = 0; i1 < arr.length; i1++) {
        var value = arr[i1];
        if (value == null || value == "" || value == "sign") {
          continue;
        }
        sPara.push(value);
      }
      var sortArr = sPara.sort();
      var sortArrStr = "";
      sortArr.forEach(function(key) {
        var item = {};
        item[key] = obj[key];
        sortArrStr += key + "=" + obj[key];
      });
      var waitSecretStr = secret + sortArrStr + secret; //str前后拼接secret的方式组成待加密字符串
      var md5 = crypto.createHash("md5");
      md5.update(waitSecretStr); //waitSign="c51951be9421b1dd93f9938555d71da5"
      var stringSign = md5.digest("hex");
      var sign = stringSign.toLocaleLowerCase(); //将签名sign转化为纯小写
      obj.sign = sign;
      return obj;
    },
    encryption(word) {
      const key = CryptoJS.enc.Utf8.parse("llc2019050920aok"); //十六位十六进制数作为密钥
      const iv = CryptoJS.enc.Utf8.parse("1983457286157286"); //十六位十六进制数作为密钥偏移量

      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      return encrypted.ciphertext.toString().toUpperCase();
    },
    login() {
      if (!this.userName) {
        this.userName = "18506920590";
      }
      if (!this.password) {
        this.password = "zxw68824";
      }

      var user = {
        user_id: this.userName,
        password: this.password,
        time: new Date().getTime()
      };

      console.log(user);

      user.password = this.$options.methods.encryption(user.password);
      console.log(user.password);

      var param = this.$options.methods.getSortObjByAsciiWithObj(user, "zxw201905142059");
      console.log(param);

      this.$http({
        method: "post",
        url: "http://127.0.0.1:5000/users/login",
        data: param
      }).then(function(res) {
          console.log(res.data);
        }).catch(function(res) {
          console.log('登录失败');
        });
    }
  }
};
</script>
<style scoped>
.login_form {
  padding-top: 10%;
  padding-left: 10%;
  padding-right: 10%;
}
.qxs-ic_user {
  background: url("../../assets/login/ic_user.png") no-repeat;
  background-size: 13px 15px;
  background-position: 3%;
}
.qxs-ic_password {
  background: url("../../assets/login/ic_password.png") no-repeat;
  background-size: 13px 15px;
  background-position: 3%;
  margin-bottom: 20px;
}
.login_logo {
  height: 100%;
}
.login_btn {
  width: 100%;
  margin-left: 40%;
  font-size: 16px;
  background: -webkit-linear-gradient(
    left,
    #000099,
    #2154fa
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #000099,
    #2154fa
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #000099,
    #2154fa
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #000099, #2154fa); /* 标准的语法 */
  filter: brightness(1.4);
}
